<template>
	<el-container>
		<el-header class="header">
			<div class="left-panel">
				<div class="left-panel-search"></div>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input
						ref="inputRef"
						v-model.trim="reqParams.sn"
						clearable
						prefix-icon="el-icon-search"
						placeholder="输入 SN 按回车键查询"
						@keyup.enter="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-table ref="tableRef" row-key="id" :data="tableData" style="width: 100%; height: 100%;">
				<el-table-column type="index" width="40" align="center" />
				<el-table-column prop="badCode" label="不良代码" align="center" width="120" />
				<el-table-column prop="badContent" label="不良内容" align="center" />
				<el-table-column prop="result" label="操作" align="center" width="320">
					<template #default="scope">
						<el-switch v-model="scope.row.result" size="large" />
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<div class="footer-right">
				<el-button
					round
					:loading="isSaveing"
					:disabled="!tableData.length"
					type="primary"
					size="large"
					@click="submit">
					提交
				</el-button>
			</div>
		</el-footer>
	</el-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const proxy2 = {
	proxy: instance?.proxy,
	globalProp: instance!.appContext.config.globalProperties,
};

const props = defineProps({
	lineCode: { type: String, required: false },
	opCode: { type: String, required: false },
});

const inputRef = ref();
const isSaveing = ref(false);
const reqParams = reactive({
	sn: '' // 查询 SN
});
const tableData = ref([]);
let formData: any;

onMounted(() => {
})

onUnmounted(() => {
})

async function search() {
    await getData();
    reqParams.sn = '';
}

async function getData() {
    formData = {};
    tableData.value = [];

    if (!reqParams.sn) {
        return;
    }

    const resp = await proxy2.globalProp.$API.reworkdoc.bysn.get(reqParams.sn);
    formData = resp.data;
    if (!formData || !formData.templateItems) {
        proxy2.globalProp.$message.warning(`没找到条码 "${reqParams.sn}" 对应的返工单据`);
        return;
    }

    tableData.value = formData.templateItems;
}

async function submit() {
    if (!tableData.value.some((s: any) => s.result)) {
        proxy2.globalProp.$alert("请至少选择一项不良内容再提交", "提示", { type: "warning" });
        return;
    }

    // 设置返工的产线+工位
    formData.reworkLineCode = props.lineCode;
    formData.reworkOpCode = props.opCode;

    isSaveing.value = true;
    const resp = await proxy2.globalProp.$API.reworkdoc.complete.post(formData);
    isSaveing.value = false;
    if (resp.code == 200) {
        proxy2.globalProp.$message.success("提交成功");
        tableData.value = [];
    } else {
        proxy2.globalProp.$alert(resp.message, "提示", { type: "error" });
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 42px;
}

.footer-right {
    float: right;
}
</style>
